<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <title>云收藏</title>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" type="text/css" href="styles.css">

    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="js/ele-index.css">
    <script src="js/ele-index.js"></script>
    <script src="js/vue.min.js"></script>

</head>
<body>
<form name="favForm" method="post" action="/cang/fav.do;jsessionid=FF8C0487A99814B144B07E5633524A0F">
    <input type="hidden" name="op" value="toList"/>

    <div class="banner" valign="top">云收藏</div>

    <table cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td style="text-align:right;" valign="top">
                <!-- 左边Tag列表 -->
                <div class="left_labels">


                    <table class="labels_table" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td><a href="#" onclick="add()" style="font-weight:bold;">添加书签</a></td>
                        </tr>
                        <tr>
                            <td :class=" {selected_label : '全部'==currentLabel}"
                                @click="currentLabel = '全部'">
                                <a @click.prevent="showAll" href="fav.do?op=toList&type=-1">全部</a>
                            </td>
                        </tr>
                        <tr>
                            <td :class=" {selected_label : '未分类'==currentLabel}"
                                @click="currentLabel = '未分类'">
                                <a href="fav.do?op=toList&type=0" @click.prevent="showNo()">未分类</a>
                            </td>
                        </tr>

                        <tr v-for="tag in tags">
                            <td :class="{selected_label : tag.tname==currentLabel}"
                            @click="currentLabel = tag.tname">
                                <a @click="showFavs(tag)" href="#">{{tag.tname}}</a>
                            </td>
                        </tr>

                        <tr>
                            <td :class=" {selected_label : '云图'== currentLabel}"
                            @click="currentLabel = '云图'">
                                <a @click.prevent="showFavs(null)" style="font-weight:bold;"
                                   href="fav.do?op=toCloud">云图</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
            <td>
                <!-- 右边fav内容 -->
                <div v-if="divStatus==1" class="content_links">

                    <div v-for="fav in currentTag.favorites" style="...">
                        <div>
                            <a href="'http://'+ fav.furl" style="..." target="_blank">
                                {{fav.flabel}}
                            </a>
                        </div>
                        <div style="...">
                            {{fav.fdesc}}
                        </div>
                        <div style="...">
                            http://{{fav.furl}}
                        </div>
                    </div>
                </div>

                <div v-if="divStatus == 2" class="content_links">
                    <span v-for="tag in tags" :style="{ fontWeight: tag.weight} ">
                        {{tag.tname}}
                    </span>
                </div>
            </td>
        </tr>
    </table>

    <el-dialog title="链接信息编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="名称" :label-width="100">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="100">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="100">
            <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
            <el-form-item label="分类" :label-width="100">
            <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>

</form>
<script>
    var v = new Vue({
        el: "form",
        data: {
            tags: [],
            currentTag: {},
            divStatus: 1 ,//div 显示状态 1，显示连接地址， 2，显示云图
            currentLabel :"",
            dialogFormVisible : false,
            form :{

            },
        },
        created() {
         this.query();
        },
        methods: {
            query(){
                axios.get("query.do").then(res => {
                    this.tags = res.data;
                    let max = 0;
                    this.tags.forEach(t => {
                        if (t.tcount > max) {
                            max = t.tcount;
                        }
                    });
                    this.tags.forEach(t => {
                        let i = parseInt(t.tcount / max * 9);
                        i *= 100;
                        t.weight = i;
                    });
                });
            },
            showFavs(tag) {
                if (tag) {
                    this.divStatus = 1;
                    this.currentTag = tag;
                    console.info(tag)
                } else {
                    //tag为null 显示云图
                    this.divStatus = 2
                }
            },
            showAll() {
                this.divStatus = 1;
                //不能改写tag的连接数据
                //重新创建一个tag包含所有的链接
                this.currentTag = {favorites : this.all};

            },
            add(){
                this.dialogFormVisible =true;
            },
            showNo(){
                axios.get("no.do").then(res => {
                    this.list = res.data;
                   console.info(this.list)
                    this.currentTag.favorites=this.list
                    });

                },
            save(){
                var p = new URLSearchParams();
                var p =new URLSearchParams();
                p.append("flabel","test");
                p.append("furl","www.test.net");
                p.append("fdesc","test");
                p.append("ftags","t1,t2");
                axios.post("add.do",p).then(res=>{
                    alter(res.data.msg);
                    console.info(res.data.data);
                    if(res.data.code   == 1){
                        this.$message(res.data.msg);
                        this.query();
                    }else{
                        this.$alter(res.data.msg);
                    }
                })
            }

        },
        computed:{
            //计算属性
            all(){
                let a=[];
                this.tags.forEach(t=>{
                    t.favorites.forEach(f=>{
                        a.push(f);
                    })
                });
                return a;
            }
        }


    })
</script>
</body>
</html>